<template>
    <ul class="tree-ul">
        <li class="tree-li">
          <span class="tree-expand" @click="handleExpand">
            <span v-if="data.children && data.children.length && !data.expand">+</span>
            <span v-if="data.children && data.children.length && data.expand">-</span>
            </span>
            <i-checkbox v-if="showCheckbox"
                           :value="data.checked"
                           @input="handleCheck"></i-checkbox>
            <span>{{data.title}}</span>

            <div v-if="data.children && data.children.length">
                <tree-node v-for="(item, index) in data.children"
                           v-if="data.expand"
                           :key="index" :data="item"
                           :show-checkbox="showCheckbox"></tree-node>
            </div>
        </li>
    </ul>
</template>

<script type="text/ecmascript-6">
  import iCheckbox from '../checkbox/checkbox.vue'
  import { findComponentUpward } from '../../utils/assist.js'

  export default {
    name: 'TreeNode',
    components: { iCheckbox },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      showCheckbox: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        tree: findComponentUpward(this, 'Tree')
      }
    },
    methods: {
      handleExpand() {
        this.$set(this.data, 'expand', !this.data.expand)

        if (this.tree) {
          this.tree.emitEvent('on-toggle-expand', this.data)
        }
      },
      handleCheck(checked) {
        this.updateTreeDown(this.data, checked)

        if (this.tree) {
          this.tree.emitEvent('on-check-change', this.data);
        }
      },
      updateTreeDown(data, checked) {
        this.$set(data, 'checked', checked)

        if (data.children && data.children.length) {
          data.children.forEach(item => {
            this.updateTreeDown(item, checked)
          })
        }
      }
    },
    watch: {
      'data.children': {
        handler(data) {
          if (data) {
            const checkedAll = data.every(item => item.checked)
            this.$set(this.data, 'checked', checkedAll)
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped lang="less">
    .tree-ul, .tree-li {
        list-style: none;
        padding-left: 10px;
    }

    .tree-expand {
        cursor: pointer;
    }
</style>
